import React, { Component } from 'react'
// 受控组件：
// input 的value属性的值 依赖于 初始化数据，
// 必须通过 onChange 事件去修改初始化状态

// select 在ios的safari 浏览器中选不中第一个
// 可以添加一个额外的，但是这个永远无法选中
export default class App extends Component {
  state = {
    username: '吴大勋',
    note: '备注',
    hobby: ''
  }
  changeHandler = (e) => {
    this.setState({
      username: e.target.value
    })
  }
  getData (e) {
    // 阻止默认的行为
    e.preventDefault()
    console.log({
      username: this.state.username,
      note: this.state.note,
      hobby:  this.state.hobby
    })
  }
  render() {
    return (
      <div>
        <form onSubmit = { this.getData.bind(this) }>
          <input 
            onChange = { this.changeHandler }
            value = { this.state.username }
            type="text"
            placeholder ="姓"/>
          <textarea value = { this.state.note } onChange={ (e) =>{
            this.setState({
              note: e.target.value
            })
          } }></textarea>
          <select value = { this.state.hobby } onChange = { (e) => {
            this.setState({
              hobby: e.target.value
            })
          }}>
            <option disabled value="">请选择</option>
            <option value="篮球">篮球</option>
            <option value="足球">足球</option>
            <option value="排球">排球</option>
            <option value="棒球">棒球</option>
          </select>
          <input type="submit" value="提交"/>
        </form>
      </div>
    )
  }
}
